// 使用时间hooks
import Now from "./hooks/Now";
// 使用验证码获取按钮
import Tiker from "./hooks/Tiker";
import { useState } from "react"
// 验证生命周期
import Text from "./hooks/Text";
// 活动案例：
import Button from "./hooks/Button";
// 新闻列表
import News from "./hooks/News";

// 导入use自定义方法
import { useWinSize } from "./hooks/useWinSize"
// 回到顶部方法：
import { useTop } from "./hooks/useTop"
function App() {
    const [show, setShow] = useState(true)
    // 通过useWinSize来创建一个dom引用
    var size = useWinSize()
    // 通过useTop来创建一个dom引用
    var [elem, top] = useTop(window.innerHeight / 2)
    return (<div>
        {/* 使用时间hooks */}
        <h1>1，使用时间hooks</h1>
        <Now></Now>
        <h1>2，使用验证码获取按钮</h1>
        <Tiker />
        <h1>3，验证生命周期</h1>
        <button onClick={() => { setShow(!show) }}>切换按钮</button>
        {show && <Text />}

        <h1>4，活动案例：</h1>
        <Button starTime={new Date("2023-04-05")} endTime={new Date("2023-04-06")} /><br />
        <Button starTime={new Date("2023-04-03")} endTime={new Date("2023-04-05")} /><br />
        <Button starTime={new Date("2023-04-03")} endTime={new Date("2023-04-04 14:19:56")} /><br />

        <h1>5，自定义视口大小方法：</h1>
        <p>窗口：{JSON.stringify(size)}</p>
        <h1>7，回到顶部</h1>
        <p>滚动距离：{top}</p>
        <div className="goTop" ref={elem}>Top</div>

        <h1>6，新闻列表</h1>
        <News />

    </div>);
}

export default App;